<template>
  <div class="content-box" v-loading="loading">
    <div class="scroll-view-box">
      <el-button class="history-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      <div class="data-box-left" ref="databoxleft">
        <div class="user-title-box" v-if="$fieldShowFunc('43-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('zjx_xmmc')">
            <div class="justify_6" slot="label">项目名称</div>
            {{ changeInfo.project_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('zjx_xmbh')">
            <div class="justify_6" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ changeInfo.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('zjx_xmpp')">
            <div class="justify_6" slot="label">项目品牌</div>
            {{ changeInfo.brand_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('zjx_xmlx')">
            <div class="justify_6" slot="label">项目类型</div>
            {{ changeInfo.store_type_name }}
          </el-descriptions-item>
          <el-descriptions-item label="项目报价单" v-if="$fieldShowFunc('zjx_xmbjd')">
            <div class="justify_6" slot="label">项目报价单</div>
            <el-button @click="jump(changeInfo.project_id)" type="text" style="padding: 0;">{{
              changeInfo.project_quotation_num }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(3, 2, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('43-zjxxx')">增减项信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="增减类型" v-if="$fieldShowFunc('zjx_zjlx')">
            <div class="justify_6" slot="label">增减类型</div>
            {{ changeInfo.increase_or_decrease == 1 ? '增项' : '减项' }}
          </el-descriptions-item>
          <el-descriptions-item label="增减内容" v-if="$fieldShowFunc('zjx_zjnr')">
            <div class="justify_6" slot="label">增减内容</div>
            {{ changeInfo.change_content }}
          </el-descriptions-item>
          <el-descriptions-item label="施工内容说明" v-if="$fieldShowFunc('zjx_sgnrsm')">
            <div class="justify_6" slot="label">施工内容说明</div>
            {{ changeInfo.construction_content }}
          </el-descriptions-item>
          <el-descriptions-item label="增减项原因" v-if="$fieldShowFunc('zjx_zjxyy')">
            <div class="justify_6" slot="label">增减项原因</div>
            {{ changeInfo.reason_type }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间" v-if="$fieldShowFunc('zjx_zjxcjsj')">
            <div class="justify_6" slot="label">创建时间</div>
            {{ changeInfo.created_at }}
          </el-descriptions-item>
          <el-descriptions-item label="附件" v-if="$fieldShowFunc('zjx_zjxfj')">
            <div class="justify_6" slot="label">附件</div>
            <div class="file-box-img-box flex ac">
              <div class="file-box-img" v-for="(item, idx) in changeInfo.change_file" :key="idx">
                <el-tooltip class="item" effect="dark" :content="item.file_name" placement="top">
                  <img class="img" :src="$fileImgFunc(item)" @click="$fileViewHandle(item)" />
                </el-tooltip>
              </div>
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="备注" v-if="$fieldShowFunc('zjx_zjxbz')">
            <div class="justify_6" slot="label">备注</div>
            {{ changeInfo.remark }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(3, 2, 1)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <template v-if="changeInfo.change_status > 10">
          <div class="user-title-box" v-if="$fieldShowFunc('43-zjxbj')">增减项报价</div>
          <el-descriptions class="margin-bottom" :column="3" border>

            <el-descriptions-item label="增减项金额" v-if="$fieldShowFunc('zjx_zjxje')">
              <div class="justify_6" slot="label">增减项金额</div>
              <el-popover placement="bottom-end" trigger="manual" :value="zjxPrice" :width="width31" :offset="10"
                popper-class="price-popover" transition="el-zoom-in-top">
                <el-descriptions :column="1" direction="horizontal" border>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_jczxf')" label="基础装修费"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">基础装修费</div>
                    {{ convert_val(changeInfo.basic_decoration_fee) }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_zccgf')" label="主材采购费"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">主材采购费</div>
                    {{ convert_val(changeInfo.material_costs) }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_sj')" label="税金"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">税金</div>
                    {{ convert_val(changeInfo.quotation_taxes) }}
                  </el-descriptions-item>
                </el-descriptions>

                <div class="item-box" @click="openClick('zjxPrice')" slot="reference"
                  v-if="$fieldShowFunc('zjx_jczxf') || $fieldShowFunc('zjx_zccgf') || $fieldShowFunc('zjx_zjx_sjzccgf')">
                  <span class="title">{{ convert_val(changeInfo.change_amount) }}</span>
                  <i :class="zjxPrice ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
                <div v-else slot="reference">
                  <span class="title">{{ convert_val(changeInfo.change_amount) }}</span>
                </div>
              </el-popover>
            </el-descriptions-item>

            <el-descriptions-item v-if="$fieldShowFunc('zjx_yhje')" label="优惠金额">
              <div class="justify_6" slot="label">优惠金额</div>
              <span class="title">{{ convert_val(changeInfo.discount_amount) }}</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="$fieldShowFunc('zjx_cbje')" label="成本金额">
              <div class="justify_6" slot="label">成本金额</div>
              <el-popover placement="bottom-end" trigger="manual" :value="cbPrice" :width="width31" :offset="10"
                popper-class="price-popover" transition="el-zoom-in-top">
                <el-descriptions :column="1" direction="horizontal" border>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_xccgcb')" label="现场采购成本"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">现场采购成本</div>
                    {{ convert_val(changeInfo.procurement_cost) }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_gscjcb')" label="公司集采成本"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">公司集采成本</div>
                    {{ convert_val(changeInfo.centralized_procurement_cost) }}
                  </el-descriptions-item>
                  <el-descriptions-item v-if="$fieldShowFunc('zjx_glcb')" label="管理成本"
                    :labelStyle="{ background: '#fff', border: 'none' }" :contentStyle="{ border: 'none' }">
                    <div class="justify_6" slot="label">管理成本</div>
                    {{ convert_val(changeInfo.management_costs) }}
                  </el-descriptions-item>
                </el-descriptions>

                <div class="item-box" @click="openClick('cbPrice')" slot="reference"
                  v-if="$fieldShowFunc('zjx_xccgcb') || $fieldShowFunc('zjx_gscjcb') || $fieldShowFunc('zjx_glcb')">
                  <span class="title">{{ convert_val(changeInfo.cost_amount) }}</span>
                  <i :class="cbPrice ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </div>
                <div v-else slot="reference">
                  <span class="title">{{ convert_val(changeInfo.cost_amount) }}</span>
                </div>
              </el-popover>
            </el-descriptions-item>
            <el-descriptions-item label="现场采购成本" v-if="$fieldShowFunc('zjx_xccgcb') && !$fieldShowFunc('zjx_cbje')">
              <div class="justify_6" slot="label">现场采购成本</div>
              {{ convert_val(changeInfo.procurement_cost) }}
            </el-descriptions-item>

            <el-descriptions-item label="利润金额" v-if="$fieldShowFunc('zjx_lrje')">
              <div class="justify_6" slot="label">利润金额</div>
              {{ convert_val(changeInfo.profit_amount) }}
            </el-descriptions-item>
            <el-descriptions-item label="报价时间" v-if="$fieldShowFunc('zjx_bjsj')">
              <div class="justify_6" slot="label">报价时间</div>
              {{ changeInfo.quotation_created_at }}
            </el-descriptions-item>
            <el-descriptions-item label="报价时效" v-if="$fieldShowFunc('zjx_zjxbjsx')">
              <div class="justify_6" slot="label">报价时效</div>
              {{ changeInfo.quotation_validity }}天
            </el-descriptions-item>
            <el-descriptions-item label="报价附件" v-if="$fieldShowFunc('zjx_zjxbjfj')">
              <div class="justify_6" slot="label">报价附件</div>
              <div class="file-box-img-box flex ac">
                <template v-for="(file, idx) in changeInfo.quotation_file">
                  <div class="file-box-img" :key="idx" v-if="file.type == 1">
                    <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                      <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="成本附件" v-if="$fieldShowFunc('zjx_zjxcbfj')">
              <div class="justify_6" slot="label">成本附件</div>
              <div class="file-box-img-box flex ac">
                <template v-for="(file, idx) in changeInfo.cost_list_file">
                  <div class="file-box-img" :key="idx" v-if="file.type == 2">
                    <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                      <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="利润附件" v-if="$fieldShowFunc('zjx_zjxlrfj')">
              <div class="justify_6" slot="label">利润附件</div>
              <div class="file-box-img-box flex ac">
                <template v-for="(file, idx) in changeInfo.profit_statement_file">
                  <div class="file-box-img" :key="idx" v-if="file.type == 3">
                    <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top">
                      <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
              v-for="key in $fieldRowFunc(3, 2, 2)" :key="key"></el-descriptions-item>
          </el-descriptions>
        </template>
      </div>
    </div>
    <!-- 审核区域 -->
    <!--  && $route.query.change_status == changeInfo.change_status -->
    <div class="examine-box" v-if="isExamine">
      <div class="examine-title">审核区域</div>
      <el-form :model="formData" ref="elFrom" label-position="top">
        <el-form-item label="" required>
          <el-radio-group v-model="formData.reviewPassed">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--  v-if="formData.reviewPassed == 2" -->
        <el-form-item label="" prop="remark">
          <el-input :rows="4" class="input-box" v-model="formData.remark" type="textarea" placeholder="审批意见"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-btn">
            <el-button type="primary" @click="saveSubmit" :loading="diaLoading">提交</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline">
          <el-timeline-item v-for="(item, index) in changeInfo.log_list" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">{{ item.content }}</div>
                <template v-if="item.change_status == 20">
                  <div class="content-table">
                    <div class="flex jb fw" v-if="item.form_data">
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_zjxje')">
                        <span class="table-item-title history_justify_6">增减项金额</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.change_amount) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_jczxf')">
                        <span class="table-item-title history_justify_6">基础装修费</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.basic_decoration_fee) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_zccgf')">
                        <span class="table-item-title history_justify_6">主材采购费</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.material_costs) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_sj')">
                        <span class="table-item-title history_justify_6">税金</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.quotation_taxes) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_yhje')">
                        <span class="table-item-title history_justify_6">优惠金额</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.discount_amount) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_cbje')">
                        <span class="table-item-title history_justify_6">成本金额</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.cost_amount) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_xccgcb')">
                        <span class="table-item-title history_justify_6">现场采购成本</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.procurement_cost) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_gscjcb')">
                        <span class="table-item-title history_justify_6">公司集采成本</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.centralized_procurement_cost)
                        }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_glcb')">
                        <span class="table-item-title history_justify_6">管理成本</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.management_costs) }}</span>
                      </div>
                      <div class="table-item width-50" v-if="$fieldShowFunc('zjx_lrje')">
                        <span class="table-item-title history_justify_6">利润金额</span>
                        <span class="table-item-content">{{ convert_val(item.form_data.profit_amount) }}</span>
                      </div>
                      <div class="table-item fw width-50" v-if="$fieldShowFunc('zjx_zjxbjfj')">
                        <div class="table-item-title history_justify_6">报价附件</div>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.quotation_file">
                            <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                              :key="index">
                              <img @click="$fileViewHandle(file)" :key="index" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                      <div class="table-item fw width-50" v-if="$fieldShowFunc('zjx_zjxcbfj')">
                        <div class="table-item-title history_justify_6">成本附件</div>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.cost_list_file">
                            <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                              :key="index">
                              <img @click="$fileViewHandle(file)" :key="index" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                      <div class="table-item fw width-50" v-if="$fieldShowFunc('zjx_zjxlrfj')">
                        <div class="table-item-title history_justify_6">利润附件</div>
                        <div class="img-list-box flex ac fw">
                          <template v-for="(file, index) in item.form_data.profit_statement_file">
                            <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                              :key="index">
                              <img @click="$fileViewHandle(file)" :key="index" class="img" :src="$fileImgFunc(file)" />
                            </el-tooltip>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <template
                  v-if="item.change_status == 25 || item.change_status == 30 || item.change_status == 35 || item.change_status == 40 || item.change_status == 45 || item.change_status == 60 || item.change_status == 65">
                  <div class="content-table" v-if="$fieldShowFunc('zjx_spyj')">
                    <div class="flex jb fw">
                      <div class="table-item">
                        <span class="table-item-title history_justify_6">审批意见</span>
                        <span class="table-item-content">{{ item.remark }}</span>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import idiApi from '@/api/increaseDecreaseItemsApi';
import { getUserInfo } from '@/utils/auth';

export default {
  name: 'increaseDecreaseItemsInfo',
  data() {
    return {
      // 审核
      isExamine: false,
      formData: {
        id: '',
        reviewPassed: 1,
        remark: '',
      },
      diaLoading: false,
      userInfo: {},

      loading: true,
      changeInfo: {},

      zjxPrice: false,
      cbPrice: false,
      hisDrawer: false,

      width31: 0,
    };
  },
  computed: {
    // 判断是否需要显示负号
    convert_val() {
      return val => {
        if (this.changeInfo.increase_or_decrease == 1 || val == 0) {
          var price = val + '元'
        } else {
          var price = '-' + val + '元'
        }
        return price
      }
    },
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.zjxPrice = false
      this.cbPrice = false
    });
    this.userInfo = getUserInfo();
    this.isExamine = this.$route.query.examine || false;
    this.getChangeDetails();
  },
  methods: {
    openClick(field) {
      this.width31 = (this.$refs['databoxleft'].clientWidth / 3) - 3
      this[field] = !this[field]
    },
    jump(id) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/budgetDetailPage?id=' + id
      })
    },
    // 详情
    getChangeDetails() {
      if (!this.$route.query.sn) return;
      idiApi.getChangeDetails({ change_id: this.$route.query.sn }).then(res => {
        console.log(res, '增减项详情')
        if (res.code == 200) {
          res.data.log_list.forEach(item => {
            item.form_data = JSON.parse(item.form_data);
          })
          this.changeInfo = res.data;
        }
        this.loading = false
      })
    },
    // 提交
    saveSubmit() {
      this.$refs['elFrom'].validate((valid) => {
        if (valid) {
          let formData = this.formData
          this.diaLoading = true;
          if (formData.reviewPassed == 1) {
            let audit_type = 1;
            if (this.changeInfo.change_status == 20) {
              audit_type = 1;
            }
            if (this.changeInfo.change_status == 30) {
              audit_type = 2;
            }
            if (this.changeInfo.change_status == 40) {
              audit_type = 3;
            }
            idiApi.changeQuotationPassed({
              project_id: this.changeInfo.project_id,
              change_id: this.changeInfo.id,
              remark: formData.remark,
              audit_type //this.userInfo.position_id == 7 ? 1 : 2,
            }).then(res => {
              console.log(res, '审核通过')
              this.diaLoading = false;
              if (res.code == 200) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.getChangeDetails();
                this.isExamine = false;
                this.$router.push({
                  path: '/increaseDecreaseItemsInfo', query: {
                    sn: this.$route.query.sn
                  }
                })
              } else {
                this.$message.error(res.message);
              }
            })
          } else {
            if (!formData.remark) {
              this.$message.warning('请输入审批意见')
              this.diaLoading = false;
              return
            }
            idiApi.changeQuotationRejected({
              project_id: this.changeInfo.project_id,
              change_id: this.changeInfo.id,
              remark: formData.remark
            }).then(res => {
              console.log(res, '审核拒绝')
              if (res.code == 200) {
                this.$message({
                  message: "提交成功",
                  type: "success",
                });
                this.getChangeDetails();
                this.isExamine = false;
                this.$router.push({
                  path: '/increaseDecreaseItemsInfo',
                  query: {
                    sn: this.$route.query.sn
                  }
                })
              } else {
                this.$message.error(res.message);
              }
              this.diaLoading = false;
            })
          }
        } else {
          return false;
        }
      });
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.changeInfo.project_id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import '@/styles/detail.scss';
@import "./index.scss";
</style>
